<!-- CustomBottomTabBar.vue -->
<template>
	<view class="custom-bottom-tab-bar">
		<view v-for="(tab, index) in tabs" :key="index" class="tab-item" @tap="handleTabClick(index)"
			:class="{ active: currentIndex === index }">
			<image :src=tab.icon mode=""></image>
			<text>{{ tab.text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CustomBottomTabBar',
		props: {
			tabs: {
				type: Array,
				default: () => []
			},
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleTabClick(index) {
				this.$emit('update:currentIndex', index);
			}
		}
	}
</script>

<style scoped>
	.custom-bottom-tab-bar {
		
		height: 56px;
		font-size: 10px;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-top: 1px solid #eee;
		/* 可选，根据需求添加顶部边框 */
		/* 其他样式 */
	}

	.tab-item {
		padding-top: 10px;
		text-align: center;
		display: flex;
		flex: 1;
		text-align: center;
		flex-direction: column;
		/* 样式 */
	}

	.tab-item image {
		margin: 0 auto;
		width: 20px;
		height: 20px;
	}

	.tab-item.active {
		
		/* 激活状态的样式 */
		color: #007aff;
		/* 举例，根据需求调整 */
	}
</style>